<template>
  <base-layout>
    <div class="blog-container">
      <!-- 顶部卡片 -->
      <a-card class="top-card">
        <template #title>
          <div class="card-title">
            <span>我的博客</span>
            <a-button type="primary" @click="handleWrite">写博客</a-button>
          </div>
        </template>
        <div class="blog-stats">
          <div class="stat-item">
            <div class="stat-number">{{ stats.total }}</div>
            <div class="stat-label">总博客数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.views }}</div>
            <div class="stat-label">总浏览量</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.likes }}</div>
            <div class="stat-label">获赞数</div>
          </div>
        </div>
      </a-card>

      <!-- 内容区大卡片 -->
      <a-card class="content-card">
        <!-- 搜索和筛选区域 -->
        <div class="filter-section">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索博客..."
            style="width: 200px"
            @search="onSearch"
          />
          <a-space>
            <a-select
              v-model:value="selectedTag"
              style="width: 120px"
              placeholder="选择标签"
              @change="onTagChange"
            >
              <a-select-option v-for="tag in tags" :key="tag" :value="tag">
                {{ tag }}
              </a-select-option>
            </a-select>
            <a-select
              v-model:value="sortBy"
              style="width: 120px"
              @change="onSortChange"
            >
              <a-select-option value="latest">最新发布</a-select-option>
              <a-select-option value="popular">最受欢迎</a-select-option>
            </a-select>
          </a-space>
        </div>

        <!-- 博客列表 -->
        <div class="blog-list">
          <a-card v-for="blog in blogs" :key="blog.id" class="blog-item">
            <template #title>
              <div class="blog-item-header">
                <h3>{{ blog.title }}</h3>
                <a-tag color="blue">{{ blog.tag }}</a-tag>
              </div>
            </template>
            <template #extra>
              <a-space>
                <a-button type="link" @click="handleEdit(blog.id)">编辑</a-button>
                <a-button type="link" danger @click="handleDelete(blog.id)">删除</a-button>
              </a-space>
            </template>
            <div class="blog-item-content">
              <p>{{ blog.summary }}</p>
              <div class="blog-item-footer">
                <div class="blog-meta">
                  <span><clock-circle-outlined /> {{ blog.date }}</span>
                  <span><eye-outlined /> {{ blog.views }}</span>
                  <span><like-outlined /> {{ blog.likes }}</span>
                </div>
              </div>
            </div>
          </a-card>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <a-pagination
            v-model:current="currentPage"
            :total="total"
            :pageSize="pageSize"
            @change="onPageChange"
          />
        </div>
      </a-card>
    </div>
  </base-layout>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ClockCircleOutlined, EyeOutlined, LikeOutlined } from '@ant-design/icons-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'

export default {
  name: 'Blog',
  components: {
    BaseLayout,
    ClockCircleOutlined,
    EyeOutlined,
    LikeOutlined
  },
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const selectedTag = ref('')
    const sortBy = ref('latest')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(100)

    const stats = reactive({
      total: 25,
      views: 1234,
      likes: 567
    })

    const tags = ['技术', '学习', '生活', '项目']

    const blogs = ref([
      {
        id: 1,
        title: '我的第一个Vue3项目',
        tag: '技术',
        summary: '这是一个关于Vue3项目的博客，记录了开发过程中的心得体会...',
        date: '2024-03-15',
        views: 123,
        likes: 45
      }
    ])

    const handleWrite = () => {
      router.push('/blog/write')
    }

    const handleEdit = (id) => {
      router.push(`/blog/edit/${id}`)
    }

    const handleDelete = (id) => {
      // 处理删除逻辑
    }

    const onSearch = (value) => {
      console.log('搜索:', value)
    }

    const onTagChange = (value) => {
      console.log('标签筛选:', value)
    }

    const onSortChange = (value) => {
      console.log('排序方式:', value)
    }

    const onPageChange = (page) => {
      currentPage.value = page
    }

    return {
      searchText,
      selectedTag,
      sortBy,
      currentPage,
      pageSize,
      total,
      stats,
      tags,
      blogs,
      handleWrite,
      handleEdit,
      handleDelete,
      onSearch,
      onTagChange,
      onSortChange,
      onPageChange
    }
  }
}
</script>

<style scoped>
.blog-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.top-card {
  margin-bottom: 24px;
}

.content-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}

.stat-label {
  color: #666;
  margin-top: 8px;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.blog-list {
  margin-bottom: 24px;
}

.blog-item {
  margin-bottom: 16px;
  border: 1px solid #e8e8e8;
}

.blog-item:last-child {
  margin-bottom: 0;
}

.blog-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-item-header h3 {
  margin: 0;
}

.blog-item-content {
  color: #666;
}

.blog-item-footer {
  margin-top: 16px;
}

.blog-meta {
  display: flex;
  gap: 16px;
  color: #999;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style> 